<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <link rel="stylesheet" type="text/css" href="../res/static/css/main.css">
    <link rel="stylesheet" type="text/css" href="../res/layui/css/layui.css">
    <script type="text/javascript" src="../res/layui/layui.js"></script>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
</head>
<body>

<div class="site-nav-bg">
    <div class="site-nav w1200">
        <p class="sn-back-home" id="adm" style="display: none">
            <i class="layui-icon layui-icon-home"></i>
            <a href="/admin">后台管理</a>
        </p>
        <div class="sn-quick-menu">
            <div id="d1" style="display: none" class="login"><a href="/register" style="color: #0C0C0C">[注册]</a></div>
            <div id="d4" style="display: none" class="login"><a href="/login" style="color: #0C0C0C;margin-left: -10px">
                [登录]</a></div>
            <div id="d2" style="display: none" class="login"><a style="color: #1E9FFF" id="user"></a></div>
            <div id="d3" style="display: none" class="login"><a id="f1" style="color: #0C0C0C"
                                                                href="javascript:;">退出登录</a></div>
        </div>
    </div>
</div>


<div class="header">
    <div class="headerLayout w1200">
        <div class="headerCon">
            <h1 class="mallLogo">
                <a href="#" title="宠物商城" id="a1">
                    <img style="width: 50%;height: 50%" src="../res/static/img/123.png">
                </a>
            </h1>
            <div class="mallSearch">
                <form action="" class="layui-form" novalidate>
                    <input type="text" name="title" required lay-verify="required" autocomplete="off"
                           class="layui-input" placeholder="请输入宠物名称">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">
                        <i class="layui-icon layui-icon-search"></i>
                    </button>
                    <input type="hidden" name="" value="">
                </form>
            </div>
        </div>
    </div>
</div>


<div class="content content-nav-base  login-content">
    <div class="main-nav">
        <div class="inner-cont0">
            <div class="inner-cont1 w1200">
                <div class="inner-cont2">
                    <a href="/index">首页</a>
                    <a href="/shopcart">购物车</a>
                    <a href="/about">关于我们</a>
                </div>
            </div>
        </div>
    </div>
    <div class="login-bg">
        <div class="login-cont w1200">
            <div class="form-box">
                <div class="layui-form">
                    <legend>新用户注册</legend>
                    <div class="layui-form-item">
                        <div class="layui-inline iphone">
                            <div class="layui-input-inline">
                                <i class="layui-icon layui-icon-cellphone iphone-icon"></i>
                                <input type="tel" name="userName" id="userName" lay-verify="required"
                                       placeholder="请输入用户名" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline iphone">
                            <div class="layui-input-inline">
                                <i class="layui-icon layui-icon-password iphone-icon"></i>
                                <input id="userPassword" type="password" name="userPassword" lay-verify="required"
                                       placeholder="请输入密码"
                                       autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline iphone">
                            <div class="layui-input-inline">
                                <i class="layui-icon layui-icon-password iphone-icon"></i>
                                <input id="userPasswordConfirm" type="password" name="userPasswordConfirm"
                                       lay-verify="required"
                                       placeholder="请确认密码"
                                       autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item login-btn">
                        <div class="layui-input-block">
                            <button style="margin-top: -35px" class="layui-btn" id="login">注册</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="footer">
    <div class="ng-promise-box">
        <div class="ng-promise w1200">
            <p class="text">
                <a class="icon1" href="javascript:;">7天无理由退换货</a>
                <a class="icon2" href="javascript:;">满99元全场免邮</a>
                <a class="icon3" style="margin-right: 0" href="javascript:;">100%品质保证</a>
            </p>
        </div>
    </div>
    <div class="mod_help w1200">
        <p>
            <a href="javascript:;">关于我们</a>
            <span>|</span>
            <a href="javascript:;">帮助中心</a>
            <span>|</span>
            <a href="javascript:;">售后服务</a>
            <span>|</span>
            <a href="javascript:;">母婴资讯</a>
            <span>|</span>
            <a href="javascript:;">关于货源</a>
        </p>
        <p class="coty">母婴商城版权所有 &copy; 2012-2020</p>
    </div>
</div>
<script type="text/javascript">
    layui.use(['layer', 'jquery'], function () {
        var $ = layui.jquery,
            layer = layui.layer;


        initIndex();

        function initIndex() {
            $.get("/findLoginInfo", {}, function (r) {
                if (r !== "null") {
                    $('#d1').css('display', 'none');
                    $('#d2').css('display', 'block');
                    $('#d3').css('display', 'block');
                    $('#d4').css('display', 'none');
                    $('#adm').css('display', 'block');
                    $('#a1').css('margin-left', '-86px');
                    $("#user").text("你好," + r + "!");
                    $("#c").css('display', 'inline');
                    $("#admin").css('display', 'inline');
                } else {
                    $('#d1').css('display', 'block');
                    $('#d4').css('display', 'block');
                    $('#d2').css('display', 'none');
                    $('#d3').css('display', 'none');
                    $('#adm').css('display', 'none');
                    $("#c").css('display', 'inline');
                    $('#a1').css('margin-left', '0px');
                    $("#admin").css('display', 'inline');
                }
            }, "text");
        }

        $("#f1").click(function () {
            layer.confirm('确定退出登录吗？', {icon: 3}, function (index) {
                $.get("/loginOut", {}, function (r) {
                    layer.close(index);
                    index = layer.load(1, {shade: [0.1, '#fff']});
                    parent.layer.msg('安全退出中...', {icon: 16, shade: 0.3, time: 5000});
                    $.get("/loginOut", {}, function (r) {
                        layer.closeAll('loading');
                        parent.layer.msg('退出成功！', {
                            icon: 1, time: 1000, shade: 0.2, end: function () {
                                window.location.reload();
                            }
                        });
                        layer.close(index);
                    });
                });
            });
        });


        $("#login").click(function () {
            var loginInfo = {
                userName: $("#userName").val().trim(),
                userPassword: $("#userPassword").val().trim()
            }
            if (loginInfo.userName === "") {
                layer.msg("请输入用户名!", {icon: 0, time: 800, shade: 0.2,});
                return false;
            } else if (loginInfo.userPassword === "") {
                layer.msg("请输入密码!", {icon: 0, time: 800, shade: 0.2,});
                return false;
            } else if ($("#userPasswordConfirm").val().trim() === "") {
                layer.msg("请确认密码!", {icon: 0, time: 800, shade: 0.2,});
                return false;
            } else if (loginInfo.userPassword !== $("#userPasswordConfirm").val().trim()) {
                layer.msg("两次密码不匹配,请重新输入!", {icon: 0, time: 1000, shade: 0.2,});
                $("#userPasswordConfirm").val("");
                return false;
            } else {
                $.ajax({
                    type: 'POST',
                    url: '/registerUser',
                    data: loginInfo,
                    dataType: 'text',
                    error: function () {
                        layer.msg('系统错误!', {icon: 2, time: 800, shade: 0.2,});
                    },
                    success: function (result) {
                        if (result === "success") {
                            layer.msg('注册成功,请登录！', {
                                icon: 1, time: 800, shade: 0.2, end: function () {
                                    window.location.href = "/login";
                                }
                            });
                        } else if (result === "error") {
                            layer.msg('注册失败，请重试!', {
                                icon: 5, time: 800, shade: 0.2, end: function () {
                                    window.location.reload();
                                }
                            });
                        } else if (result === "cf") {
                            layer.msg('该用户名已注册，请重试!', {
                                icon: 0, time: 800, shade: 0.2, end: function () {
                                    $("#userName").val("");
                                    return false;
                                }
                            });
                        }
                    }
                })
            }
        });
    })


</script>

</body>
</html>